import React,{ Component,Fragment } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Image,
	TouchableOpacity,
	ScrollView
} from 'react-native';
import CheckList from '../../common/CheckList';
import Toast, {DURATION} from 'react-native-easy-toast';
import Axios from '../../axios';
class HeaderLeft extends Component{
	render(){
		return (<TouchableOpacity
				onPress={()=>this.props.goBack()}
			>
			<Image
				style={styles.topLeftImg}
				source={require('../../assets/images/back_icon.png')}
			/>
		</TouchableOpacity>)
	}
}
class NextStep extends Component{
	render(){
		return  <TouchableOpacity
					onPress={()=>this.props.nextStep()}
				>
					<View>
						<Text style={{color:'#fff',fontSize:16,marginRight:5}}>下一步</Text>
					</View>
				</TouchableOpacity>
	}
}
let productIds = null;
export default class NetMaintainSecondStep extends Component{
	state = {
		productList:[]
	}
	static navigationOptions = ({navigation,navigationOptions})=>{
		const name = navigation.getParam("name");
		const policyId = navigation.getParam("policyId");
		const policyName = navigation.getParam("policyName");
		const policyType = navigation.getParam("policyType");
		return {
			title:name,
			headerLeft:<HeaderLeft goBack={()=>navigation.navigate("NetMaintainFirstStep")}/>,
			headerRight: <NextStep nextStep={()=>{
													if(productIds==null){
														navigation.getParam('toast').show('请选择维系产品',3);
													}else{
														navigation.navigate("NetMaintainThirdStep",{
														name:navigation.getParam("name"),
														policyId:policyId,
														productIds:productIds,
														policyType:policyType,
														productList:navigation.getParam("productList")
														})
													}
												}} />,

			headerStyle:{
				...navigationOptions.headerStyle,
				backgroundColor:"#f54545"
			},
			headerTitleStyle:{
				fontSize:18,
				flex:1,
				textAlign:'center'
			}
		}
	}
	componentDidMount() {
		 this.getProductList(this.props.navigation.state.params.policyType,this.props.navigation.state.params.policyId.value);
		 this.props.navigation.setParams({
		 	toast:this.refs.toast
		 });
	}
	getProductList = (policyType,policyId)=>{
		console.log(policyId);
		Axios.ajax({
			url:'/mkt/policyMatching',
			data:{'type': policyType,'id': policyId}
		}).then((res)=>{
			let productList = res.data.map(
                    (element)=>{
                    	var secondData =  new Object();
                		if(element.productCount!='null'){
							secondData.name = element.productName+'('+element.productCount+'人)';
                		}else{
							secondData.name = element.productName;
                		}
                		secondData.value = element.productId;
                        return secondData;
                    });
			this.setState({productList:productList});
			this.props.navigation.setParams({
		 		productList:res.data
		 	});
		})
	}
	render(){
		return (
			<ScrollView>
				<View style={styles.stepWrap}>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active01.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>用户筛选</Text>
					</View>
					<View style={[styles.stepLine,styles.stepLineActive]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active02.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>产品匹配</Text>
					</View>
					<View style={styles.stepLine}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step03.png')}
						/>
						<Text style={styles.stepTxt}>效果评估</Text>
					</View>
					<View style={styles.stepLine}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step04.png')}
						/>
						<Text style={styles.stepTxt}>触点匹配</Text>
					</View>
				</View>
				<View style={styles.policyContent}>
					<View style={styles.policyTitle}>
						<Image 
							style={styles.policyImage}
							source={require('../../assets/images/title_icon.png')}
						/>
						<Text style={styles.policyTitleText}>维系产品</Text>
					</View>
					<View>
						<View style={styles.policySubTitle}>
								<Text style={styles.policySubTitleText}>—— {this.props.navigation.state.params.policyId.name} ——</Text>
						</View>
						<View style={styles.policiesContent}>
							<CheckList 
							data={this.state.productList}
							type='checkbox' //radio和checkbox
							checkClick={(value)=>{
								productIds = value;
							}}
						/>
						</View>
					</View>
				</View>
				<Toast 
					ref="toast"  
					position="bottom"
					positionValue={260}
					fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
				/>
			</ScrollView>
		)
	}
}

const styles=StyleSheet.create({
	topLeftImg:{
		width:22,
		height:22,
		marginLeft:10
	},
	policySubTitleText:{
		color:'#ccc',
		textAlign:'center'
	},
	policySubTitle:{
		paddingTop:20
	},
	policiesContent:{
		paddingTop:20,
		paddingBottom:20,
		flexDirection:'row',
		flexWrap:'wrap',
		justifyContent:'center'
	},
	policyItem:{
		paddingTop:5,
		paddingRight:10,
		paddingBottom:5,
		paddingLeft:10,
		borderWidth:1,
		borderColor:'#ccc',
		color:'#ccc',
		borderRadius:14,
		marginBottom:10,
		marginLeft:5,
		marginRight:5
	},
	policyItemSelected:{
		borderColor:'#f54545',
		color:'#f54545'
	},
	policyContent:{
		backgroundColor:'#fff',
		marginTop:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		borderTopWidth:1,
		borderTopColor:'#e6e6e6',
		paddingLeft:10,
		paddingRight:10
	},
	policyTitle:{
		flexDirection:'row',
		alignItems:'center',
		paddingTop:10,
		paddingBottom:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	policyTitleText:{
		fontSize:16,
		marginLeft:5,
		color:'#757575'
	},
	policyImage:{
		width:20,
		height:20
	},
	stepWrap:{
		backgroundColor:'#fff',
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-around',
		paddingTop:5,
		paddingBottom:5,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	stepItem:{
		
	},
	stepImage:{
		width:50,
		height:50
	},
	stepTxt:{
		textAlign:'center',
		fontSize:10,
		marginTop:3,
		color:'#757575'
	},
	stepTxtActive:{
		color:'#f54545'
	},
	stepLine:{
		width:30,
		height:1,
		marginLeft:0,
		marginRight:0,
		marginBottom:10,
		backgroundColor:'#e6e6e6'
	},
	stepLineActive:{
		backgroundColor:'#f54545'
	}
})